<header class="l-header flex-container flex-row">
    <pp-header-logo></pp-header-logo>
    <button class="l-exit-button" title="Exit the configuration page" (click)="onClickExit()"><i class="fas fa-times"></i></button>
</header>
<div class="l-main-container font-opensans">
    <section class="l-sidemenu-section">
        <ul class="l-list l-depth-0">
            <li class="l-list-item">
                <a class="l-link l-link-with-arrow" [class.active]="isActive(linkAdmin)" (click)="toggleMenu('admin')" #linkAdmin>
                    <span class="l-link-text">Administration</span><i class="fas fa-angle-right" [@rightDown]="getCollapsedState('admin')"></i>
                </a>
            </li>
            <ul class="l-list l-depth-1" [@collapseSpread]="getCollapsedState('admin')">
                <li class="l-list-item"><a (click)="onMenuClick('agentStatistic')" routerLink="/config/agentStatistic" routerLinkActive="active" class="l-link">Agent Statistic</a></li>
                <li class="l-list-item"><a (click)="onMenuClick('agentManagement')" routerLink="/config/agentManagement" routerLinkActive="active" class="l-link">Agent Management</a></li>
            </ul>
            <li class="l-list-item l-separator"></li>
            <li class="l-list-item">
                <a class="l-link l-link-with-arrow" [class.active]="isActive(linkSetting)" (click)="toggleMenu('setting')" #linkSetting>
                    <span class="l-link-text">Setting</span><i class="fas fa-angle-right" [@rightDown]="getCollapsedState('setting')"></i>
                </a>
                <ul class="l-list l-depth-1" [@collapseSpread]="getCollapsedState('setting')">
                    <li class="l-list-item"><a (click)="onMenuClick('general')" routerLink="/config/general" routerLinkActive="active" class="l-link">General</a></li>
                    <li class="l-list-item"><a (click)="onMenuClick('favorite')" routerLink="/config/favorite" routerLinkActive="active" class="l-link">Favorite List</a></li>
                </ul>
            </li>
            <li class="l-list-item l-separator"></li>        
            <li class="l-list-item"><a (click)="onMenuClick('userGroup')" routerLink="/config/userGroup" routerLinkActive="active" class="l-link">User Group</a></li>
            <li class="l-list-item"><a (click)="onMenuClick('alarm')" routerLink="/config/alarm" routerLinkActive="active" class="l-link">Alarm</a></li>
            <li class="l-list-item"><a (click)="onMenuClick('installation')" routerLink="/config/installation" routerLinkActive="active" class="l-link">Installation</a></li>
            <li class="l-list-item l-separator"></li>
            <li class="l-list-item"><a (click)="onMenuClick('help')" routerLink="/config/help" routerLinkActive="active" class="l-link">Help</a></li>
        </ul>
    </section>
    <section class="l-main-section">
        <router-outlet></router-outlet>
    </section>
</div>
